/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */
const obj = {
    status: '',
    channel_id: '',
    page: 1,
    per_page: 2,
}
let total_count = 0;
async function getData() {
    let result = await axios({ url: '/v1_0/mp/articles', params: obj, });
    // 3.1 保存并设置文章总条数
    console.log(result);
    total_count = result.data.data.total_count;
    // console.log(total_count);
    document.querySelector('.total-count').innerHTML = '共' + total_count + '条';
    //渲染
    document.querySelector('.art-list').innerHTML = result.data.data.results.map(items => {
        return `<tr>
<td>
  <img src=${items.cover.type === 0 ? "https://img2.baidu.com/it/u=2640406343,1419332367&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=708&amp;h=500" : items.cover.images[0]}  
  alt="">
</td>
<td>${items.title}</td>
<td>
${items.status === 1 ? '<span class="badge text-bg-primary">待审核</span>' : '<span class="badge text-bg-success">审核通过</span>'}
  </td>
<td>
  <span>${items.pubdate}</span>
</td>
<td>
  <span>${items.read_count}</span>
</td>
<td>
  <span>${items.comment_count}</span>
</td>
<td>
  <span>${items.like_count}</span>
</td>
<td data-id="${items.id}">
  <i class="bi bi-pencil-square edit"></i>
  <i class="bi bi-trash3 del"></i>
</td>
</tr>` }).join('');
}
getData();
/*** 目标2：筛选文章列表*/
/**2.1 设置频道列表数据 */
async function getlist() {
    const result = await axios({ url: '/v1_0/channels' });
    const str = `<option value="" selected>请选择文章频道</option>` + result.data.data.channels.map(items =>
        `<option value="${items.id}" >${items.name}</option>`
    ).join('');
    document.querySelector('.form-select').innerHTML = str;
}
getlist();
/* 2.2 监听筛选条件改变，保存查询信息到查询参数对象,点击筛选时，传递查询参数对象到服务器**/
document.querySelectorAll('.form-check-input').forEach(items => {
    items.addEventListener('change', e => {
        obj.status = e.target.value;
    })
})
document.querySelector('.form-select').addEventListener('change', e => {
    obj.channel_id = e.target.value
})
/* 2.4 获取匹配数据，覆盖到页面展示*/
document.querySelector('.sel-btn').addEventListener('click', () => {
    getData();
})

/**
* 目标3：分页功能
*  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
*  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
*/
document.querySelector('.next').addEventListener('click', () => {
    if (obj.page < Math.ceil(total_count / obj.per_page)) {
        obj.page++;
        document.querySelector('.page-now').innerHTML = '第' + obj.page + '页';
        getData();
    }
    else {
        myAlert(false, '这是最后一页了');
    }
});
document.querySelector('.last').addEventListener('click', () => {
    if (obj.page > 1) {
        obj.page--;
        document.querySelector('.page-now').innerHTML = '第' + obj.page + '页';
        getData();
    }
    else {
        myAlert(false, '这是第一页，不能在翻页了');
    }
});
/**
 * 目标4：删除功能
 *  4.1 关联文章 id 到删除图标
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 重新获取文章列表，并覆盖展示
 *  4.5 删除最后一页的最后一条，需要自动向前翻页
 */
document.querySelector('.art-list').addEventListener('click', (e) => {
    if (e.target.classList.contains('del')) {
        let flag = confirm('确定删除吗');
        if (flag) {
            let id = e.target.parentNode.dataset.id;
            axios({ url: `/v1_0/mp/articles/${id}`, method: 'DELETE' }).then(result => {
                setTimeout(() => {
                    myAlert(true, '删除成功')
                }, 1200);
                console.log(result);
                if (document.querySelector('.art-list').children.length == 1 && obj.page !== 1) {
                    obj.page--;
                    document.querySelector('.page-now').innerHTML = '第' + obj.page + '页';

                }
                getData();
            })
        }
    }
})
// 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去
document.querySelector('.art-list').addEventListener('click', (e) => {
    if (e.target.classList.contains('edit')) {
        let flag = confirm('你确定编辑吗')
        if (flag) {
            let id = e.target.parentNode.dataset.id;
            location.href = `../publish/index.html?id=${id}`
        }
    }
})
